<template>
  <div class="topshenhe">
    <div class="titleservice">
      <div class="diyishow"></div>
      <font>服务详情</font>
    </div>
    <div class="dierserviceshow">
      <hr color="#F7FAFD" />
    </div>
    <div class="juminserviceShow">
      <font>居民信息</font>
    </div>
    <div class="xinxiserviceShow">
      <table border="0" height="200px" width="100%">
        <tr>
          <td align="right" width="54px"><font class="font1">姓名</font></td>
          <td width="10px"></td>
          <td width="200px">
            <a href="#" class="xingming">{{list.user_name}}</a>
          </td>
          <td width="54px"><font class="font1">身份证号</font></td>
          <td width="10px"></td>
          <td width="330px">{{list.user_cardId}}</td>
          <td align="right" width="54px"><font class="font1">性别</font></td>
          <td width="10px"></td>
          <td width="150px">{{list.user_sex == 1 ?"男":"女"}}</td>
          <td align="right" width="54px"><font class="font1">年龄</font></td>
          <td width="10px"></td>
          <td>{{list.user_age}}</td>
        </tr>
        <tr>
          <td><font class="font1">联系电话</font></td>
          <td width="10px"></td>
          <td>{{list.user_phone}}</td>
          <td align="right"><font class="font1">现居地</font></td>
          <td width="10px"></td>
          <td colspan="3">{{list.user_area}}</td>
          <td width="10px"></td>
          <td><font class="font1">居民标签</font></td>
          <td width="10px"></td>
          <td><el-tag>高血压</el-tag><el-tag type="success">冠心病</el-tag></td>
        </tr>
        <tr>
          <td valign="top" align="right"><font class="font1">家庭</font></td>
          <td width="10px"></td>
          <td height="86px" colspan="10">
            <div id="jia">
              <div id="jia1-1">
                <img
                  width="50px"
                  height="50px"
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gpbctv.com%2Fuploads%2F20210424%2Fzip_1619246266UkP6CL.jpg&refer=http%3A%2F%2Fwww.gpbctv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668159694&t=df771f88b08225d45c9f63c773529041"
                  alt=""
                />
              </div>
              <div id="jia1-2">
                <table class="tableserviceshow1">
                  <tr>
                    <td><font id="xingming">李青</font></td>
                    <td><font class="font1">58岁</font></td>
                  </tr>
                  <tr>
                    <td><font class="font1">关系:</font></td>
                    <td><font class="font1">父母</font></td>
                  </tr>
                </table>
              </div>
            </div>
            <div id="jia1">
              <div id="jia1-1">
                <img
                  width="50px"
                  height="50px"
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gpbctv.com%2Fuploads%2F20210424%2Fzip_1619246266UkP6CL.jpg&refer=http%3A%2F%2Fwww.gpbctv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668159694&t=df771f88b08225d45c9f63c773529041"
                  alt=""
                />
              </div>
              <div id="jia1-2">
                <table class="tableserviceshow1">
                  <tr>
                    <td><font id="xingming">王林</font></td>
                    <td><font class="font1">28岁</font></td>
                  </tr>
                  <tr>
                    <td><font class="font1">关系:</font></td>
                    <td><font class="font1">夫妻</font></td>
                  </tr>
                </table>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="disanserviceshow">
      <hr color="#F7FAFD" />
    </div>
    <div class="disi">
      <font>服务信息</font>
    </div>
    <div class="diwu">
      <table border="0" height="200px" width="100%">
        <tr>
          <td align="right" width="54px">
            <font class="font1">服务编号</font>
          </td>
          <td width="10px"></td>
          <td width="200px">2021340001</td>
          <td width="54px"><font class="font1">服务状态</font></td>
          <td width="10px"></td>
          <td width="270px"><font color="#28D094">{{list.serve_state ==1?"待审核":(list.serve_state ==2?"待服务":"已驳回")}}</font></td>
          <td align="right" width="54px">
            <font class="font1">服务机构</font>
          </td>
          <td width="10px"></td>
          <td width="250px">{{list.sign_organization ==1?"罗西社区服务中心":(list.serve_state ==2?"天明社区服务中心":"民进社区服务中心")}}</td>
          <td align="right" width="54px">
            <font class="font1">服务团队</font>
          </td>
          <td width="10px"></td>
          <td>{{list.sign_team ==1?"A团队":(list.sign_team ==2?"B团队":"C团队")}}
          </td>
        </tr>

        <tr>
          <td align="right" width="54px">
            <font class="font1">服务医生</font>
          </td>
          <td width="10px"></td>
          <td width="200px">
            {{list.sign_doctor ==1?"田浩华":(list.sign_doctor ==2?"张峰鸣":(list.sign_doctor ==3?"王帅龙":(list.sign_doctor ==4?"杨林楠":"万辉")))}}
          </td>
          <td width="54px" align="right"><font class="font1">服务包</font></td>
          <td width="10px"></td>
          <td width="270px">{{list.serveName}}</td>
          <td align="right" width="54px">
            <font class="font1">服务项目</font>
          </td>
          <td width="10px"></td>
          <td width="250px">{{list.projectName}}</td>
          <td align="right" width="54px">
            <font class="font1">服务来源</font>
          </td>
          <td width="10px"></td>
          <td>居民申请</td>
        </tr>

        <tr>
          <td align="right" width="54px">
            <font class="font1">服务地点</font>
          </td>
          <td width="10px"></td>
          <td width="200px">机构门诊</td>
          <td width="54px"><font class="font1">预约时间</font></td>
          <td width="10px"></td>
          <td width="270px">{{list.contract_date}}</td>
          <td align="right" width="54px">
            <font class="font1">提交时间</font>
          </td>
          <td width="10px"></td>
          <td width="250px">{{list.end_time}}</td>
          <td align="right" width="54px"><font class="font1"></font></td>
          <td width="10px"></td>
          <td></td>
        </tr>

        <tr>
          <td align="right" width="54px">
            <font class="font1">服务备注</font>
          </td>
          <td width="10px"></td>
          <td width="200px" colspan="10">上次的药已经吃完了</td>
        </tr>
      </table>
    </div>
    <div class="diliu">
      <hr color="#F7FAFD" />
    </div>
    <div class="diqi">

<!-- 待审核 -->
<el-dialog
  title="审核确认"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>确定要审核通过吗？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="queding(), dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<!-- 待服务 -->
<el-dialog
  title="填写健康随访信息"
  :visible.sync="dialogVisible1"
  width="30%"
  :before-close="handleClose">
  <span>
    <table>
      <tr>
        <td><font color="#999999">血压*</font></td>
        <td><el-input v-model="list.user_xieya" placeholder="请输入内容"></el-input></td>
      </tr>
      <tr>
        <td><font color="#999999">空腹血糖*</font></td>
        <td><el-input v-model="list.user_xetang" placeholder="请输入内容"></el-input></td>
      </tr>
      <tr>
        <td><font color="#999999">心率*</font></td>
        <td><el-input v-model="list.user_xinlu" placeholder="请输入内容"></el-input></td>
      </tr>
      <tr>
        <td><font color="#999999">病情描述*</font></td>
        <td><el-input v-model="list.user_miaoshu" type="textarea"></el-input></td>
      </tr>
      <tr>
        <td><font color="#999999">健康指导*</font></td>
        <td><el-input v-model="list.user_zhidao" type="textarea"></el-input></td>
      </tr>
    </table>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="fuwuqueding(),dialogVisible1 = false">确 定</el-button>
  </span>
</el-dialog>

<!-- 取消预约 -->
<el-dialog
  title="取消预约服务确认"
  :visible.sync="dialogVisible2"
  width="30%"
  :before-close="handleClose">
  <span>
    <table>
      <tr>
        <td><font color="#999999">取消原因*</font></td>
        <td><el-input type="textarea"></el-input></td>
      </tr>
    </table>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="quxiaoyuyue(),dialogVisible2 = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 驳回 -->
<el-dialog
  title="驳回确认"
  :visible.sync="dialogVisible3"
  width="30%"
  :before-close="handleClose">
  <span>
    <table>
      <tr>
        <td><font color="#999999">取消原因*</font></td>
        <td><el-input v-model="yuanyin" type="textarea"></el-input></td>
      </tr>
    </table>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="bohiu(),dialogVisible3 = false">确 定</el-button>
  </span>
</el-dialog>


      <!-- 待审核 -->
      <div v-if="flag==1">
      <el-button type="primary" v-if="true" @click="bianji()">编辑服务信息</el-button>
      <el-button type="success" v-if="true"  @click="dialogVisible = true">审核通过</el-button>
      <el-button type="danger" v-if="true" @click="dialogVisible3 = true">驳回</el-button>
      <el-button plain @click="fanhiu()" v-if="true">返回</el-button>
      </div>
      <!-- 已驳回 -->
      <div v-if="flag==3">
      <el-button plain @click="fanhiu()" v-if="true">返回</el-button>
      </div>
      <!-- 待服务 -->
      <div v-if="flag==2">
      <el-button type="primary" v-if="true" @click="bianji()">编辑服务信息</el-button>
      <el-button type="success" v-if="true" @click="dialogVisible1 = true">完成服务</el-button>
      <el-button type="danger" v-if="true" @click="dialogVisible2 = true">取消预约</el-button>
      <el-button plain @click="fanhiu()" v-if="true">返回</el-button>
      </div>

    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080/";
export default {
  data() {
    return {
      list: [],
      zt:'',
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      yuanyin:""
};
  },
  methods: {
    // 驳回
    bohiu(){
      axios({
        url: "serve/bohiu",
        method: "GET",
        params:{
          id:this.$route.query.id
        }
      }).then((res) => {
        this.queryList()
      });
    },
    // 取消预约
    quxiaoyuyue(){
      axios({
        url: "serve/quxiaoyuyue",
        method: "POST",
        params:{
          id:this.$route.query.id
        }
      }).then((res) => {
        this.$router.push({
          path:"/serve02"
        })
      });
    },
    // 服务确定
    fuwuqueding(){
      axios({
        url: "serve/fuwuqueding",
        method: "POST",
        params:{
          signEntity:this.list
        }
      }).then((res) => {
        this.$router.push({
          path:"/serve02"
        })
      });
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 确定
    queding(){
      axios({
        url: "serve/shenhe",
        method: "GET",
        params:{
          id:this.$route.query.id
        }
      }).then((res) => {
        this.queryList()
      });
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    bianji(){
      this.$router.push({
        path:'/serve04',
        query: {
          id: this.list.user_id,
        },
      });
    },
    fanhiu(){
      this.$router.push({
        path:'/serve01',
      });
    },
    queryList() {
      axios({
        url: "serve/getServeById",
        method: "GET",
        params:{
          id:this.$route.query.id
        }
      }).then((res) => {
        this.list = res.data; //把值传到list里面
        this.flag = res.data.serve_state
      });
    },
  },
  created() {
    this.zt=this.$route.query.zt
    document.querySelector("body").setAttribute("style", "background-color:#F2F7FB");
    this.queryList();
    console.log(this.list);
  },
  
};
</script>

<style>
img{
  border-radius: 50px;
}
.xingming {
  color: #2984f8;
  text-decoration: none;
}
.xingming:hover {
  text-decoration: underline;
}
.diqi {
  margin-left: 2%;
  margin-top: 2%;
  float: left;
  width: 96%;
  height: 10%;
  /* background-color: red; */
}
.diliu {
  float: left;
  width: 96%;
  margin-left: 2%;
  margin-top: 1%;
}
.diwu {
  width: 96%;
  /* height: 20px; */
  float: left;
  /* background-color: red; */
  margin-top: 2%;
  margin-left: 2%;
  font-size: 13px;
}
.disi {
  float: left;
  width: 96%;
  margin-left: 2%;
  margin-top: 2%;
  /* background-color: red; */
}
.disanserviceshow {
  float: left;
  width: 96%;
  /* height: 20px; */
  /* background-color: red; */
  margin-top: 2%;
  margin-left: 2%;
}
.tableserviceshow1 {
  float: left;
  margin-top: -65px;
  margin-left: 110px;
  width: 80px;
}
#xingming {
  font-size: 16px;
}
#jia1-2 {
  float: left;
  width: 100px;
  height: 84px;
  /* background-color: #2984f8; */
}
#jia1-1 {
  float: left;
  width: 100px;
  height: 83px;
  line-height: 120px;
  text-align: center;
  /* background-color: #2984f8; */
}
#jia1 {
  margin-left: 2%;
  float: left;
  width: 200px;
  height: 84px;
  border: 1px solid rgb(223, 217, 217);
  border-radius: 5px;
  /* background-color: brown;    */
}
#jia:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#jia1:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
#jia {
  float: left;
  width: 200px;
  height: 84px;
  border-radius: 5px;

  border: 1px solid rgb(223, 217, 217);
  /* background-color: brown;    */
}
.xinxiserviceShow {
  float: left;
  width: 96%;
  /* height: 120px; */
  /* background-color: #2984f8; */
  margin-left: 2%;
  margin-top: 2%;
  font-size: 13px;
}
.juminserviceShow {
  float: left;
  width: 98%;
  height: 20px;
  margin-left: 2%;
  font-size: 16px;
  margin-top: 2%;
}
.dierserviceshow {
  float: left;
  height: 10px;
  width: 96%;
  margin-left: 2%;
  /* margin-top: 1%; */
  /* background-color: blue; */
}
.diyishow {
  width: 6px;
  height: 20px;
  background-color: #2984f8;
  border-radius: 5px;
  margin-left: 2%;
  display: inline-block;
  margin-right: 10px;
}
.titleservice {
  width: 100%;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  /* background: rgb(255, 214, 214); */
}
.topshenhe {
  width: 1150px;
  height: 770px;
  background: white;
  margin: 20px auto;
}
</style>